﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ItemView.aspx.cs" Inherits="Gallery_ItemView" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <link href="css/main.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
        .c-SetItemTile .isSelected .selectionTab
        {
            position: absolute;
            display: block;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-top: 42px solid #094AB2;
            border-left: 42px solid transparent;
        }
        
        
        .c-SetItemTile .isSelected .selectionBorder
        {
            position: absolute;
            display: block;
            border: 3px solid #094AB2 !important;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        
        
        .c-SetItemTile a:hover .selectBox, .c-SetItemTile .isSelected .selectBox
        {
            visibility: visible;
            opacity: 1;
        }
        
        .c-SetItemTile .anySelected .selectArea
        {
            width: 100%;
            height: 100%;
        }
        
        
        .c-ImageTile
        {
            display: inline-block;
            position: relative;
            overflow: hidden;
        }
        .selectTri
        {
            position: absolute;
            top: 0;
            right: 4px;
            border-top: 30px solid #000;
            border-right: 30px solid #000;
            border-bottom: 30px solid transparent;
            border-left: 30px solid transparent;
            display:none;
        }
        .item
        {
            position: relative;
            vertical-align: top;
            text-decoration: none;
        }
        .item input[type="checkbox"]
        {
            position: absolute;
            top: 6px;
            right: 10px;
            display: none;
            text-decoration: none;
        }
        .item:hover input[type="checkbox"]
        {
            display: block;
        }
    </style>
    <link href="css/NYKpPzcj59cFilesCSS2.css" rel="stylesheet" type="text/css" />
    <link href="css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery.lightbox-0.5.min.js" type="text/javascript"></script>
    <title>ItemVIew</title>
    <link href="../Styles/metro.teal.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">

        $(document).ready(function () {
         $(".class1").click(function () {


             $('input:checked').parent().parent().animate({ opacity: 0 }, 1000).animate({ width: 0, "margin": 0 }, 1000).fadeOut(10);

                    });


            $(".item input[type='checkbox']").click(function () {
                if ($("#" + this.id).attr("checked")) {
                    $("#" + this.id).prev().css("display", "block");
                    $('[id$=sideDiv]').animate({ "margin-right": "0" }, { duration: 1000 });
                                        $("#" + this.id).css("display", "block");
                    
                    // info();

                }
                else {

                    if ($(".item input[type='checkbox']:checked").length == 0)
                        $('[id$=sideDiv]').animate({ "margin-right": "-220px" }, { duration: 1000 });
                                        $("#" + this.id).prev().css("display", "none");
                                        $("#" + this.id).css("display", "");
                    //                    $('.close').click();
                }

               
                    
                




            });

            function info() {

                // where it starts at -65 and where it ends 
                var startPos = $('#info-bar').css('top');
                var endPos = 0;
                $('#info-bar').stop();
                $('#info-bar').css({ top: startPos });
                $('#info-bar').animate({ top: endPos }, 800);
            }
            // doing it with delay 
            // setTimeout(info, 2000);
            // info();

            $('.close').click(function () {
                var startPos = $('#info-bar').css('top');
                var endPos = '-65px';
                $('#info-bar').stop();
                $('#info-bar').css({ top: startPos });
                $('#info-bar').animate({ top: endPos }, 700);
            });


        });
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
 <!--  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> -->
    <script src="js/functions.js" type="text/javascript"></script> 
    
 
    <div id="info-bar">
    <div class="info-text"> Follow me on twitter
    <button >Reem</button>
    <a href="#" class ="close">

       </a>
    </div>
    
    </div>
    
   <br /><br /><br />
    <div id="wrapper">
       
     <div class="tile one tealbg" style="background-color:White; border: 1px dashed #CCC;">
                <br />
                <br />
                <br />
                  <a href="createAlbum.aspx">+ Add new Photo</a>

                </div>
        <div style="float: left">
            <a class="item tile one bluebg" href="#">
                <div class="selectTri">
                </div>
                <input id="Checkbox1" type="checkbox" />
                <img class="lightbox" src="photos/image1.jpg" height="200px" width="200px" />
                
                <br clear="both" />
            </a>
        </div>


        <div style="float: left">
            <a class="item tile one bluebg" href="#">
                <div class="selectTri">
                </div>
                <input id="Checkbox6" type="checkbox" />
                <img src="photos/image1.jpg" height="200px" width="200px" />
                
                <br clear="both" />
            </a>
        </div>

        <div style="float: left">
            <a class="item tile one bluebg" href="#">
                <div class="selectTri">
                </div>
                <input id="Checkbox7" type="checkbox" />
                <img src="photos/image1.jpg" height="200px" width="200px" />
                
                <br clear="both" />
            </a>
        </div>

        <div style="float: left">
            <a class="item tile one bluebg" href="#">
                <div class="selectTri">
                </div>
                <input id="Checkbox8" type="checkbox" />
                <img src="photos/thumb_image3.jpg" height="200px" width="200px" />
                <br clear="both" />
            </a>
        </div>

        <div style="float: left">
            <a rel="lightbox" class="item tile one bluebg" href="#">
                <div class="selectTri">
                </div>
                <input id="Checkbox9" type="checkbox" />
                <img src="photos/image1.jpg" height="200px" width="200px" />
                
                <br clear="both" />
            </a>
        </div>

        <div style="float: left">
            <a class="item tile one bluebg"  href="#">
                <div class="selectTri">
                </div>
                <input id="Checkbox10" type="checkbox" />
                <img src="photos/image1.jpg" height="200px" width="200px" />
                <br clear="both" />
            </a>
        </div>
  
   <%--     <div id="MainPic" style="float: left">
            
            <div id="div1" class="tile one bluebg" style="position: relative">
                <span class="selectionBorder"><span class="selectionTab"><span class="selectBox">
                    <!-- <asp:CheckBox ID="CheckBox1" runat="server" Style="position: absolute" /> -->
                    <input type="checkbox" tabindex="-1" id="Checkbox5" class="checkbox">
                </span></span></span><span id="SetItemTile-138_3" class="selectArea"></span><a class="lightbox"
                    rel="lightbox" href="photos/image3.jpg">
                    <img class="selectionTab" src="photos/image5.jpg" />
                </a>
            </div>
            <div id="div2" class="tile one bluebg" style="position: relative">
                <!--style="float:left ; position:relative" -->
                <asp:CheckBox ID="CheckBox2" runat="server" Style="position: absolute" />
                <img id="del2" src="photos/Delete.jpg" style="position: absolute; left: 120px;" />
                <img src="photos/Edit.jpg" style="position: absolute; left: 60px" />
                <a class="lightbox" rel="lightbox" href="photos/image3.jpg">
                    <img src="photos/image4.jpg" />
                </a>
            </div>
            <div id="div3" class="tile one bluebg" style="position: relative">
                <asp:CheckBox ID="CheckBox3" runat="server" Style="position: absolute" />
                <img id="del3" src="photos/Delete.jpg" style="position: absolute; left: 120px;" />
                <img src="photos/Edit.jpg" style="position: absolute; left: 60px" />
                <a class="lightbox" rel="lightbox" href="photos/image3.jpg">
                    <img src="photos/image3.jpg" />
                </a>
            </div>
            <div id="div4" class="tile one bluebg" style="position: relative">
                <asp:CheckBox ID="CheckBox4" runat="server" Style="position: absolute" />
                <img id="del4" src="photos/Delete.jpg" style="position: absolute; left: 120px;" />
                <img src="photos/Edit.jpg" style="position: absolute; left: 60px" />
                <a class="lightbox" rel="lightbox" href="photos/image3.jpg">
                    <img src="photos/image2.jpg" />
                </a>
                <%--    <div style="float:left">
         <a class="lightbox" rel="lightbox" href="photos/image1.jpg">
            <asp:CheckBox ID="CheckBox2" runat="server" style="position:absolute"/>
               <img src="photos/Delete.jpg" style="position:absolute ; left:90px;"/>
            <img src="photos/Edit.jpg"  style="position:absolute; left:80px"/>
            
                 
        <img src="photos/image1.jpg" style="height:200px; width:150px" /></a></div>

        <div style="float:left">
            <asp:CheckBox ID="CheckBox3" runat="server" style="position:absolute" />
              <img src="photos/Delete.jpg" style="position:absolute ; left:90px;"/>
            <img src="photos/Edit.jpg"  style="position:absolute; left:80px"/>
            
        <a class="lightbox" rel="lightbox" href="photos/image2.jpg">
        <img src="photos/image2.jpg" style="height:200px; width:150px"  /></a><</div>

              
            </div>
        </div>--%>

        
    <div  id="sideDiv" class="tile one tealbg" style="width: 200px; margin-right:-220px; height:100%; position:fixed; right:0; top:0px; border: 1px solid #000;  "><div style="position:absolute; right:0; cursor:pointer">x</div><div id="albumTitle"> Edit Album </div> 
     
    <div align="left">
    <br />
    Album Name:
    <input id="Text1" type="text" style="width:150px;" />
    <br />
    Event Title:
    <input id="Text2" type="text"  style="width:150px;" />
    <br />
    <br />
    <input type="button" value="Save Changes" />

    <br />
    <br />

    </div>

    <div class="class1"> 
       <input  type="button" value="Delete Photo" /> 
    </div>
 
    
    
    </div>
    </div>
    </form>
</body>
</html>
